<template>
  <div class="header">
    <div class="header-main flex-box">
      <ul>
        <li :class="{active:navIndex===0}" @click="$router.push('/')">天方烨谈</li>
        <li :class="{active:navIndex===1}" @click="$router.push('/tingShuo')">一听一说</li>
        <li :class="{active:navIndex===2}" @click="$router.push('/weiKe')">基因微课</li>
      </ul>
      <div class="move-line" :style="{left:moveLineLeft+'px'}"></div>
      <div class="search-icon"><svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-life-search"></use>
        </svg></div>
    </div>
  </div>
</template>
<script>
// @ is an alias to /src

export default {
  data() {
    return {
      list: '',
      navIndex: 0,
      moveLineLeft: 0,
      choosen: {
        value: '',
        index: ''
      },
      routeNames: ['yeTan', 'tingShuo', 'weiKe']
    }
  },
  name: 'home',
  computed: {},
  methods: {},
  created() {
    this.navIndex = this.routeNames.indexOf(this.$route.name)
  },
  mounted() {
    let _self = this
    $('.header-main ul li').click(function() {
      _self.navIndex = $(this).index()
      var ulLeft = $('.header-main ul')[0].offsetLeft
      $('.move-line').css({ left: $(this)[0].offsetLeft + ulLeft })
    })
    this.moveLineLeft =
      $('.header-main ul li')[this.navIndex].offsetLeft + $('.header-main ul')[0].offsetLeft
  }
}
</script>
<style lang="scss" scoped>
.header {
  width: 100%;
  height: r(64);
  position: fixed;
  z-index: 6666;
  top: 0;
  left: 0;
  background: #fff;
  .header-main {
    max-width: 750px;
    height: r(64);
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
    @include setPm(padding, 0, 24, 0, 24);
    justify-content: space-between;
    -webkit-justify-content: space-between;
    ul {
      display: block;
      float: left;
      overflow: hidden;
      position: relative;
      li {
        float: left;
        font-size: r(16);
        margin-right: r(16);
        color: #999;
        &.active {
          color: #383838;
        }
      }
    }
    .move-line {
      width: r(64);
      height: 2px;
      position: absolute;
      top: r(50);
      background: #383838;
      left: r(24);
      transition: all 0.35s ease-in;
      -webkit-transition: all 0.35s ease-in;
    }
    .search-icon {
      width: r(24);
      height: r(24);
      color: #999999;
      font-size: r(24);
    }
  }
}
</style>
